<template>
  <section style="padding: 0 20px">
    <el-form ref="ruleForm">
      <template v-for="(item, index) in data">
        <el-row :key="index"
                :gutter="24"
                class="rowSty">
          <el-col :span="2">
            <span :title="item.goodsName"
                  style="font-size:14px">{{item.goodsName}}</span>
          </el-col>
          <el-col :span="1">
            <span :title="item.spec"
                  class="ellipsis">{{item.spec}}</span>
          </el-col>
          <el-col :span="1">
            <span :title="`${item.quantity}件`"
                  class="ellipsis">{{item.quantity}}件</span>
          </el-col>
          <el-col :span="20">
            <el-row class="rowSty">
              <template v-for="(option, i) in item.order">
                <el-col :key="i"
                        :span="3">
                  <el-form-item :prop="`${option.num}`"
                                class="mlr10">
                    <div :class="item.flag ? 'inputSty_error' : 'inputSty_success'">
                      <div class="labelSty">{{ `第${i + 1}单` }}</div>
                      <el-input v-model="option.num"
                                oninput="this.value=(this.value.match(/\d{0,8}(\d{0,0})?/)||[''])[0];"
                                @blur="handleDispatchDetails(index, i)"></el-input>
                      <icon-svg v-if="
                          item.order.length > 2 && i === item.order.length - 1
                        "
                                icon-name="shanchu_youshangjiao"
                                :class-name="
                          item.order.length === 10
                            ? 'iconSty left110 pointer'
                            : item.order.length === 9
                            ? 'iconSty left123 pointer'
                            : 'iconSty left140 pointer'
                        "
                                @click="handleDelete" />
                    </div>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
            <div v-if="item.flag"
                 class="errorTips">
              物品数量合计不能大于或是小于总数量
            </div>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </section>
</template>

<script>
export default {
  name: "NumProcess",
  props: {
    goodsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      data: []
    };
  },
  created () {
    this.data = this.goodsList;
  },
  methods: {
    handleDelete () {
      if (this.data[0].order.length < 3)
        return this.$message.error("最少需拆分2段！");
      this.data.map((item) => {
        item.order.pop();
      });
      this.$emit("handleDispatchDetails", this.data);
    },
    handleDispatchDetails (index, i) {
      if (i + 1 < this.data[0].order.length) {
        let total = 0;
        this.data[index].order.map((item, itemIndex) => {
          if (itemIndex != i + 1) total += Number(item.num);
        });
        this.data[index].order[i + 1].num =
          this.data[index].quantity - total < 0
            ? 0
            : this.data[index].quantity - total;
      }

      let totalNum = 0;
      let arr = this.data;
      arr[index].order.map((item) => {
        totalNum += Number(item.num);
      });
      arr[index].flag = totalNum != arr[index].quantity ? true : false;
      this.data = [...arr];
      this.$emit("handleDispatchDetails", this.data);
    }
  }
};
</script>

<style lang="scss" scoped>
// /deep/ .el-input--small .el-input__inner {
//   height: 32px !important;
//   line-height: 32px !important;
// }
.rowSty {
  font-size: 15px;
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.mlr10 {
  margin: 0 10px;
}
.inputSty_success {
  display: flex;
  border: 1px solid #dcdfe6;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
}
.inputSty_error {
  display: flex;
  border: 1px solid var(--prev-color-text-purered);
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
}
.labelSty {
  font-size: 12px;
  color: var(--prev-color-text-darkgrey);
  width: 64px;
}
.iconSty {
  width: 15px;
  height: 15px;
  position: absolute;
  top: -5px;
}
.left110 {
  left: 110px;
}
.left123 {
  left: 123px;
}
.left140 {
  left: 140px;
}
.errorTips {
  color: var(--prev-color-text-purered);
  font-size: 12px;
  margin-bottom: 8px;
  margin-left: 15px;
}
</style>
